<template>
  <div>
    <Table :loading="loading" :columns="columns" :data="listData">
      <template slot-scope="{ row }" slot="room">
        <a @click="show_room(row.room_id)">{{row.room_name}}</a>
      </template>
      <template slot-scope="{ row,index }" slot="content">
        <Button
          type="success"
          size="small"
          style="margin-right: 5px"
          @click="show_content(index)"
        >查看内容</Button>
      </template>
      <template slot-scope="{ row }" slot="member">
        <a @click="show_member(row.member_id)">{{row.member_name}}</a>
      </template>
      <template slot-scope="{ row }" slot="use_time">
        {{row.use_time}}分钟
      </template>
      <template slot-scope="{ row }" slot="result">
        <Tag v-if="row.ischeck" color="success">审核通过</Tag>
        <Tag v-else color="error">未审核</Tag>
      </template>
    </Table>
    <Modal v-model="showUser" title="用户信息" :footer-hide="true" :width="60">
      <user-info :member_id="member_id"></user-info>
    </Modal>
    <Modal v-model="showContent" title="会议内容" :footer-hide="true" :width="60">
      <div style="background:#fff;padding: 20px">
        <Card :bordered="false">
          <p slot="title">{{ meetInfo.name }}</p>
          <p>{{ meetInfo.content }}</p>
        </Card>
      </div>
    </Modal>
    <Modal v-model="showRoom" title="会议室" :footer-hide="true" :width="60" :styles="{top:'0px'}">
      <room-info :room_id="room_id"></room-info>
    </Modal>
  </div>
</template>

<script>
import userInfo from '@/view/components/user/user.vue'
import roomInfo from '@/view/components/room/room.vue'
export default {
  name: 'recordList',
  components: {
    userInfo,
    roomInfo
  },
  props: {
    pageNum: Number,
    loading: Boolean,
    listData: Array
  },
  data () {
    return {
      showUser: false,
      showRoom: false,
      showContent: false,
      meetInfo: {
        name: '',
        content: ''
      },
      member_id: null,
      room_id: null,
      columns: [
        {
          title: '会议室',
          slot: 'room',
          align: 'center'
        },
        {
          title: '会议内容',
          align: 'center',
          slot: 'content'
        },
        {
          title: '预约用户',
          align: 'center',
          slot: 'member'
        },
        {
          title: '使用时间/分',
          align: 'center',
          slot: 'use_time'
        },
        {
          title: '预约时间',
          align: 'center',
          key: 'create_time'
        },
        {
          title: '审核时间',
          align: 'center',
          key: 'check_time'
        },
        {
          title: '会议开始',
          align: 'center',
          key: 'start_time'
        },
        {
          title: '会议结束',
          align: 'center',
          key: 'end_time'
        },
        {
          title: '创建IP',
          align: 'center',
          key: 'create_ip'
        },
        {
          title: '结果',
          align: 'center',
          slot: 'result'
        }
      ]
    }
  },
  methods: {
    show_member (member_id) {
      this.member_id = member_id
      this.showUser = true
    },
    show_room (room_id) {
      this.room_id = room_id
      this.showRoom = true
    },
    show_content (index) {
      this.meetInfo.name = this.listData[index].name
      this.meetInfo.content = this.listData[index].content
      this.showContent = true
    }
  }
}
</script>

<style lang="" scoped>
</style>
